nuke-base-input

BaseInput

• category: Components
• chinese: 基础输入框
• type: 基本

---

API

Props

参数	说明	类型	默认值	可选值
multiple	多行	boolean	false
type	输入类型	String	text	text date tel number
disabled	是否禁用	boolean	false
readOnly	是否只读	Boolean	false
maxLength	最大长度，只有 type = text 才生效	number	-
onInput	输入事件	function(value, e)	false
onFocus	Focus 事件	function	false
onBlur	Blur 事件	function	false
onChange	change	function(value, e)
onReturn	点击虚拟键盘右下角的键触发的事件，在 native 端使用原生事件，web 端使用 keyup 且 charCode = 13 代替。返回值 e {returnKeyType:'类型',value:'输入框的值'}	function(e)	false
returnKeyType	虚拟键盘右下角的文案，目前只在 native 有效	string	default	default go next search send done
rows	multiple = true 时，可同时显示的行数	number	2
placeholder	placeholder 文本	string	-
placeholderColor	placeholder 颜色，仅 native 有效	string	'#999999'

实例方法

• focus()

  让 input 获得焦点

• blur()

  让 input 失去焦点

• getValue()

  获取输入框的值

• setNativeFormatRule(rules) [weex 0.17+]

  设置 native 中对实时输入内容格式化的规则，这个方法常用于前端无法解决的 native 双向绑定的场景。

  以下 demo 给出在客户端上信用卡卡号输入时，每输入 4 个数字自动加入一个空格的场景：

  const rules={
    formatRule: '/(\\d{4})(?!$)/g',
    formatReplace: '$1 ',
    recoverRule: '/(\\s*)/g',
    recoverReplace: '',
  }
  componentDidMount() {
    if (isWeb) {
      //...
    } else {
      setTimeout(() => {
        this.refs['text-field'] && this.refs['text-field'].setNativeFormatRule(rules);
      }, 500);
    }
  }